<template>
    <div class="admin-dashboard">
        <h1 class="page-title">云盘系统管理后台</h1>

        <el-row :gutter="20" class="dashboard-stats">
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>用户总数</span>
                        </div>
                    </template>
                    <div class="stat-value">{{ stats.userCount }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>文件总数</span>
                        </div>
                    </template>
                    <div class="stat-value">{{ stats.fileCount }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Upload />
                            </el-icon>
                            <span>今日上传</span>
                        </div>
                    </template>
                    <div class="stat-value">{{ stats.todayUploads }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Download />
                            </el-icon>
                            <span>今日下载</span>
                        </div>
                    </template>
                    <div class="stat-value">{{ stats.todayDownloads }}</div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="chart-row">
            <el-col :span="12">
                <el-card shadow="hover" class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>文件上传/下载趋势</span>
                        </div>
                    </template>
                    <div ref="trendChartRef" class="chart-container"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>存储空间使用情况</span>
                        </div>
                    </template>
                    <div ref="storageChartRef" class="chart-container"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="recent-activity">
            <el-col :span="24">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>最近活动</span>
                        </div>
                    </template>
                    <el-table :data="recentActivities" style="width: 100%">
                        <el-table-column prop="time" label="时间" width="200" />
                        <el-table-column prop="user" label="用户" width="200" />
                        <el-table-column prop="ip" label="IP" width="200" />
                        <el-table-column prop="action" label="操作" />
                        <el-table-column prop="details" label="文件名" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { User, Document, Upload, Download } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import list from '@/utils/url'

// 统计数据
const stats = ref({
    userCount: 0,
    fileCount: 0,
    todayUploads: 0,
    todayDownloads: 0
})

// 最近活动
const recentActivities = ref([])
const loading = ref(false)

// 图表引用
const trendChartRef = ref(null)
const storageChartRef = ref(null)
let trendChart = null
let storageChart = null

// 获取仪表盘数据
const fetchDashboardData = async () => {
    loading.value = true
    try {
        const response = await request.get(list.list_admin_api.dashboard)
        if (response && response.data) {
            // console.log('仪表图:',response);
            const data = response.data

            // 更新统计数据
            stats.value.userCount = data.userCount || 0
            stats.value.fileCount = data.fileCount || 0
            stats.value.todayUploads = data.todayUploads || 0
            stats.value.todayDownloads = data.todayDownloads || 0

            // 更新最近活动
            recentActivities.value = data.recentActivities || []

            // 更新图表数据
            if (data.trendData) {
                updateTrendChart(data.trendData)
            }

            if (data.storageData) {
                updateStorageChart(data.storageData)
            }
        }
    } catch (error) {
        console.error('获取仪表盘数据失败:', error)
    } finally {
        loading.value = false
    }
}

// 初始化趋势图表
const initTrendChart = () => {
    if (!trendChartRef.value) return

    trendChart = echarts.init(trendChartRef.value)
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['上传', '下载']
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '上传',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0],
                smooth: true,
                lineStyle: {
                    color: '#409EFF'
                }
            },
            {
                name: '下载',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0],
                smooth: true,
                lineStyle: {
                    color: '#67C23A'
                }
            }
        ]
    }

    trendChart.setOption(option)
}

// 更新趋势图表数据
const updateTrendChart = (trendData) => {
    if (!trendChart) return

    trendChart.setOption({
        xAxis: {
            data: trendData.dates || []
        },
        series: [
            {
                name: '上传',
                data: trendData.uploads || []
            },
            {
                name: '下载',
                data: trendData.downloads || []
            }
        ]
    })
}

// 初始化存储空间图表
const initStorageChart = () => {
    if (!storageChartRef.value) return

    storageChart = echarts.init(storageChartRef.value)
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} MB ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['文档', '图片', '视频', '音频', '压缩包', '其他']
        },
        series: [
            {
                name: '存储空间',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 0, name: '文档' },
                    { value: 0, name: '图片' },
                    { value: 0, name: '视频' },
                    { value: 0, name: '音频' },
                    { value: 0, name: '压缩包' },
                    { value: 0, name: '其他' }
                ]
            }
        ]
    }

    storageChart.setOption(option)
}

// 更新存储空间图表数据
const updateStorageChart = (storageData) => {
    if (!storageChart) return

    storageChart.setOption({
        series: [
            {
                data: storageData
            }
        ]
    })
}

// 窗口大小变化时重新调整图表大小
const handleResize = () => {
    trendChart?.resize()
    storageChart?.resize()
}

onMounted(() => {
    // 初始化图表
    initTrendChart()
    initStorageChart()

    // 获取数据
    fetchDashboardData()

    // 添加窗口大小变化监听
    window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', handleResize)

    // 销毁图表实例
    trendChart?.dispose()
    storageChart?.dispose()
})
</script>

<style scoped>
.admin-dashboard {
    padding: 20px;
}

.page-title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #303133;
}

.dashboard-stats {
    margin-bottom: 30px;
}

.stat-card {
    height: auto;
    padding: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #409EFF;
    margin-top: 15px;
}

.chart-row {
    margin-bottom: 30px;
}

.chart-container {
    height: 300px;
}

.recent-activity {
    margin-bottom: 20px;
}
</style>